<template>
	<view style="padding-bottom: 100px;">
		<up-form labelPosition="left" :labelWidth="108" errorType="toast" :model="form" :rules="rules" ref="formRef">
			<view class="white-bg u-p-l-24 u-p-r-24 u-m-t-24">
				<up-form-item label="人员姓名" required prop="nickName" borderBottom>
					<up-input v-model="form.nickName" placeholder="请输入姓名" border="none">
					</up-input>
				</up-form-item>
				<up-form-item label="手机号码" required prop="phone" borderBottom>
					<up-input v-model="form.phone" placeholder="请输入手机号码" border="none">
					</up-input>
				</up-form-item>
				<up-form-item label="证件号码" required prop="idNumber" borderBottom>
					<up-input v-model="form.idNumber" placeholder="请输入身份证或护照号码" border="none">
					</up-input>
				</up-form-item>
				<up-form-item label="家庭住址" required prop="homeAddress" borderBottom>
					<up-input v-model="form.homeAddress" placeholder="请输入家庭住址" border="none">
					</up-input>
				</up-form-item>
				<up-form-item label="人员职务" required prop="startAt">
					<up-input v-model="form.duty" placeholder="请输入所在单位职务" border="none">
					</up-input>
				</up-form-item>
			</view>
			<view class="col-title">
				车辆信息
			</view>
			<view class="white-bg u-p-l-24 u-p-r-24">
				<up-form-item label="车辆类型" prop="carType" borderBottom>
					<view style="width: 280rpx;">
						<up-subsection :list="carTypeList" @change="subcChange"></up-subsection>
					</view>
				</up-form-item>
				<up-form-item label="车牌号码" prop="carNo">
					<up-input v-model="form.carNo" placeholder="请输入" border="none">
					</up-input>
				</up-form-item>
			</view>
			<view class="col-title">
				人员信息
			</view>
			<view class="white-bg u-p-l-24 u-p-r-24">
				<up-form-item label="是否党员" required prop="isParty" borderBottom>
					<up-radio-group v-model="form.isParty">
						<view class="u-m-r-40">
							<up-radio label="是" name="是"></up-radio>
						</view>
						<up-radio label="否" name="否"></up-radio>
					</up-radio-group>
				</up-form-item>

			</view>
			<view class="col-title">
				单位信息
			</view>
			<view class="white-bg u-p-l-24 u-p-r-24">
				<up-form-item label="所在单位" required prop="entId" borderBottom>
					<up-input v-model="form.endName" readonly border="none"></up-input>
				</up-form-item>
				<up-form-item label="人员角色" required prop="roleId">
					<picker @change="roleChange" :value="form.roleId" range-key="name" :range="roles">
						<up-input v-model="form.roleName" readonly placeholder="请选择" border="none">
							<template #suffix>
								<up-icon name="arrow-right" size="18"></up-icon>
							</template>
						</up-input>
					</picker>

				</up-form-item>
			</view>
			<view class="col-title">
				备注信息
			</view>
			<view class="white-bg u-p-l-24 u-p-r-24">
				<view class="f-s-15 u-p-t-28 ">备注信息</view>
				<up-textarea v-model="form.remark" border="none" placeholder="请输入备注信息"></up-textarea>
			</view>
			<view class="col-title">
				人脸正面照片
			</view>
			<view class="white-bg u-p-l-24 u-p-r-24  u-p-b-32">
				<view class="f-s-15 u-p-t-28 u-p-b-28">上传人脸照片</view>
				<up-upload :fileList="fileList" :maxCount="1" @afterRead="afterRead"></up-upload>
			</view>
		</up-form>
	</view>
	<view class="post-btn">
		<up-button text="提  交" color="#1677FF" :customStyle="{
			width: '100%',
			borderRadius: '16rpx'
		}" @click="submit"></up-button>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		parseSceneParams,
		toast,
		uploadFilePromise
	} from '@/utils/common.js';
	import {
		registerUser
	} from '@/api/user.js';
	import config from '@/config'

	import {
		onLoad
	} from '@dcloudio/uni-app'

	const {
		proxy
	} = getCurrentInstance();
	const roles = [{
			id: 2,
			name: '企业员工'
		},
		{
			id: 3,
			name: '企业管理员'
		}
	]
	const prefix = config.imgPrefix
	const carTypeList = [{
		name: '无'
	}, {
		name: '油车'
	}, {
		name: '新能源'
	}]

	const form = ref({
		loginCode: '',
		nickName: '',
		phone: '',
		idNumber: '',
		homeAddress: '',
		duty: '',
		carType: '',
		carNo: '',
		isParty: '',
		endId: '',
		entName: '',
		roleId: '',
		remark: '',
		photo: '',
	})
	// 上传的文件列表
	const fileList = ref([])

	const rules = {
		nickName: [{
			required: true,
			message: '输入真实姓名',
			trigger: 'blur'
		}],
		phonenumber: [{
			required: true,
			message: '输入手机号码',
			trigger: 'blur'
		}],
		idNumber: [{
			required: true,
			message: '输入身份证号码',
			trigger: 'blur'
		}],
		homeAddress: [{
			required: true,
			message: '输入家庭住址',
			trigger: 'blur'
		}],
		duty: [{
			required: true,
			message: '输入职务',
			trigger: 'blur'
		}]
	}


	onLoad((options) => {
		uni.login({
			provider: 'weixin',
			success(suc) {
				form.value.loginCode = suc.code;
			}
		})
		if (!options.q) {
			uni.navigateBack()
			return
		}
		const paramsData = parseSceneParams(options.q)
		console.info('解析后数据', paramsObj)
		const entId = paramsData.entId
		const entName = paramsData.entName
		if (!entId || !entName) {
			uni.navigateBack()
			return
		}
		form.value.entId = endId
		form.value.endName = entName
	})

	const subcChange = (e) => {
		form.value.carType = carTypeList[e].name
	}

	const roleChange = (e) => {
		const role = roles[e.detail.value]
		if (!role) {
			return
		}
		form.value.roleId = role.id
		form.value.roleName = role.name
	}

	const submit = () => {
		proxy.$refs["formRef"].validate().then(valid => {
			registerUser(form.value).then(resp => {
				toast("提交成功")
				uni.$u.sleep(300).then(() => {
					uni.reLaunch({
						url: '/pages/login'
					})
				})
			})
		})
	}

	// 上传文件
	const afterRead = async ({
		file
	}) => {
		const data = await uploadFilePromise(file.url)
		const url = JSON.parse(data).data.saveUrl
		fileList.value = [{
			url: prefix + url
		}]
		form.value.photo = url
	}
</script>

<style lang="scss" scoped>
	.col-title {
		padding: 16rpx 24rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.45);
		line-height: 40rpx;
	}

	.post-btn {
		width: 100vw;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		box-sizing: border-box;
		padding: 20rpx 32rpx 88rpx 32rpx;
	}

	.user_box {
		margin-top: 40rpx;
		min-height: 100px;
		max-height: 200px;
		overflow-y: scroll;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-gap: 16px; // 列间距为12px。
		padding-bottom: 20px;

		.user-item {
			height: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid #ccc;
			border-radius: 6px;
			font-size: 14px;
			background-color: #f5f5f5;
			color: #666;
		}

		.user-active {
			color: #1677FF;
			background-color: #E9F0FF;
			border: 1px solid #1677FF;
		}
	}

	.upload-btn {
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1rpx solid #E5E5E5;
		font-weight: 400;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.65);
		line-height: 64rpx;
		width: 240rpx;
		text-align: center;
	}

	.file-item {
		height: 88rpx;
		background: #FFFFFF;
	}

	::v-deep .u-textarea {
		padding: 20rpx 0 0 0 !important;
		display: grid;

	}
	
</style>